<template>
    <div>
        <el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading" style="display:none"></el-button>
        	<el-form :inline="true" class="demo-form-inline">
			 <span @click="backList()" class="backuy"><i class="el-icon-back"></i></span>
                    <el-form-item label="应用类型:">
                        <span>{{currentDetailInfo.contestTypeStr}}</span>
                    </el-form-item>
                    <el-form-item label="应用面信息:">
                        <span v-show="currentDetailInfo.h">H:{{currentDetailInfo.h}}m  &nbsp; </span>
                        <span v-show="currentDetailInfo.w">W:{{currentDetailInfo.w}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.d">D:{{currentDetailInfo.db}}m ~ {{currentDetailInfo.d}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.w1">W1:{{currentDetailInfo.w1}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.w2">W2:{{currentDetailInfo.w2}}m &nbsp; </span>
                    </el-form-item>
                    <el-form-item>
                        <span>{{colorFlag == 1 ? '单白' : '彩色'}}</span>
                    </el-form-item>
                    
                    <!-- <el-form-item label="参考项:">
                        <el-select v-model="chooseEchatType" multiple collapse-tags @change="initData">
                            <el-option v-for="item in echatTypeList" :key="item.value" :label="item.name" :value="item.value">{{item.name}}</el-option>
                        </el-select>
                    </el-form-item> -->
 					<el-form-item label="灯具类型:" class="widsets widsets2 ">
                      <el-select v-model="searchLampType">
                        <el-option
                          v-for="item in lampTypeList"
                          :key="item.id"
                          :label="item.lampName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="功率(w):" class="widsets">
                      <el-input v-model="powerMin"><i slot="suffix"></i>w</el-input>
					  ~
                      <el-input v-model="powerMax"><i slot="suffix"></i>w</el-input>
                    </el-form-item>
					 <el-form-item label="平均亮度(cd/㎡)" class="widsets">
                      <el-input v-model="brightnessAvgMin"></el-input>
					  ~
                      <el-input v-model="brightnessAvgMax"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="initData()">查询</el-button>
                    </el-form-item>

                </el-form>
               
         <div id="echarts" style="height:580px;width:900px;margin: 0"></div>
    </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
		isfrist:false,
      fullscreenLoading:false,
      lampTypeList:[],
      searchLampType:'',
	  searchPower:'',
	  brightnessAvgMin:'',
	  brightnessAvgMax:'',
	  powerMin:'',
	  powerMax:'',
		ids:'',
		currentDetailInfo:{},
        echatTypeList : [
                { value: '3', name: '推荐·低'},
                { value: '4', name: '推荐·中'},
                { value: '5', name: '推荐·高'}],
        chooseEchatType:['3','4','5']
    }
  },
  props:['colorFlag','contestId','contestTypeStr'],
  mounted(){

  },
  methods: {
	  clearSearchParam(){
			this.searchLampType=''
			this.brightnessAvgMin=''
			this.brightnessAvgMax=''
			this.powerMin=''
			this.powerMax=''
	  },
	openFullScreen1() {
    	this.fullscreenLoading = true;
	},
	setContestDetetionIds(ids,req){
		this.ids = ids
		this.currentDetailInfo = req
	},
    generateArr(length,value){
        var dataArr = new Array(length);
        for(var i=0;i<dataArr.length;i++){
            dataArr[i] =value;
        }
        return dataArr;
    },
    backList(){
        this.$emit('backDetail');
    },
    initData(){
		if(!this.isfrist){
			this.searchLampType=''
			this.brightnessAvgMin=''
			this.brightnessAvgMax=''
			this.powerMin=''
			this.powerMax=''
		}
		this.isfrist = true
      this.openFullScreen1()
		let self = this
      //加载灯具类型
      this.$http.get("/api/lampTypes/json", {}, function(res) {
        if (res.success) {
          self.lampTypeList = res.data;
        }
      });
		var echarts1 = document.getElementById("echarts")
		echarts1.style.width=(window.innerWidth - 370)+'px';
        var myChart = this.$echarts.init(echarts1);

		var refTypeStr = '1,2,3,4,5' 
        var temp = ''
        for(var i =0;i<this.chooseEchatType.length;i++){
            temp += this.chooseEchatType[i] + ","
        }
		refTypeStr = temp.substring(0,temp.length-1)
		
        var params = {
			detetionIds:this.ids,
			refTypeStr:refTypeStr,
        	lampType:this.searchLampType,
		}

		var objparams  ={
			powerMin:this.powerMin,
			powerMax:this.powerMax,
			brightnessAvgMin:this.brightnessAvgMin,
			brightnessAvgMax:this.brightnessAvgMax
		}
        this.$http.postQueryObj('/api/contestStatistics/contestIndexForSupplierJson/'+this.colorFlag+'/'+this.contestId,params,objparams,function(res){
			var data = res.data
          self.fullscreenLoading = false;
			var length = data.indexList.length;
				
		    	 var  powerMax =0;
		    	 var lightnessMaxBig = 0;
		    	 var lightnessMaxSmall = 10000000;
		    	 var evennessMin = 100000;
		    	 var evennessMax = 0;
		    	 var  brandName ='';
		    	  
		     if(data.detectionList){
		    	 
		    	 console.log(data.detectionList.length);
		    	 
		    	 var dataBJ =[];
		    
					for(var i=0 ;i<data.detectionList.length;i++){
					
						var detection = data.detectionList[i];
						var dataChild =[];
						brandName = detection.brandName;
						
						dataChild.push(detection.power);   //功率
						dataChild.push(detection.lightnessAve);  //平均亮度
						dataChild.push(detection.lightnessMax);  //最大亮度
						dataChild.push(detection.evenness);     //均匀度
						dataChild.push(detection.posCode);     //编号
						dataBJ.push(dataChild);
					
						if(detection.power>powerMax){
							powerMax =detection.power;
						}
						
						if(detection.lightnessMax > lightnessMaxBig){
							lightnessMaxBig =detection.lightnessMax
						}
						
						if(detection.lightnessMax < lightnessMaxSmall){
							lightnessMaxSmall =detection.lightnessMax
						}
						
						if(detection.evenness > evennessMax){
							evennessMax =detection.evenness
						}
						
						if(detection.evenness < evennessMin){
							evennessMin =detection.evenness
						}
					}
				}
				
				
	     if(data.otherDetectionList){
	    	 console.log(data.otherDetectionList.length);
		    	 var dataOther =[];
		    	
					for(var i=0 ;i<data.otherDetectionList.length;i++){
						var detection = data.otherDetectionList[i];
						var dataChildOther =[];
						dataChildOther.push(detection.power);   //功率
						dataChildOther.push(detection.lightnessAve);  //平均亮度
						dataChildOther.push(detection.lightnessMax);  //最大亮度
						dataChildOther.push(detection.evenness);     //均匀度
						dataChildOther.push(detection.posCode);     //编号
						dataOther.push(dataChildOther);
						
						if(detection.power>powerMax){
							powerMax =detection.power;
						}
						
						if(detection.lightnessMax > lightnessMaxBig){
							lightnessMaxBig =detection.lightnessMax
						}
						
						if(detection.lightnessMax < lightnessMaxSmall){
							lightnessMaxSmall =detection.lightnessMax
						}
						
						if(detection.evenness > evennessMax){
							evennessMax =detection.evenness
						}
						
						if(detection.evenness < evennessMin){
							evennessMin =detection.evenness
						}
					}
				}
				
				

			

				          var schema = [
				              {name: 'power', index: 0, text: '功率'},
				              {name: 'lightnessAve', index: 1, text: '平均亮度'},
				              {name: 'lightnessMax', index: 2, text: '最大亮度'},
				              {name: 'evenness', index: 3, text: '均匀度'},
				              {name: 'posCode', index: 4, text: '编号'},
				          ];


				          var itemStyle = {
				              normal: {
				                  opacity: 0.8,
				                  shadowBlur: 10,
				                  shadowOffsetX: 0,
				                  shadowOffsetY: 0,
				                  shadowColor: 'rgba(0, 0, 0, 0.5)'
				              }
				          };

				          var option = {
				              backgroundColor: '#f6f6fd',
				              color: [
				                  '#dd4444', '#008000', '#80F1BE'
				              ],
				              legend: {
				                  y: 'top',
				                  data: [brandName,'其他'],
				                  textStyle: {
				                    //   color: '#fff',
				                      fontSize: 16
				                  }
				              },
				              grid: {
				                  x: '10%',
				                  x2: 150,
				                  y: '18%',
				                  y2: '10%'
				              },
				              tooltip: {
				                  padding: 10,
				                  backgroundColor: '#222',
				                  borderColor: '#777',
				                  borderWidth: 1,
				                  formatter: function (obj) {
									  console.log(obj)
				                	  var value = obj.value;
				                		//  if( obj.seriesName!='其他'){
							                      return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
							                          + value[4] + ' ' + value[0] + '瓦：'
							                          + '</div>'
							                          + schema[1].text + '：' + value[1] + '<br>'
							                          + schema[2].text + '：' + value[2] + '<br>'
							                          + schema[3].text + '：' + value[3] + '<br>';
				                		//  }else{
				                		// 	var lampCode = value[4] ;
				                		// 	if(lampCode!=null && lampCode.length>4){
				                		// 		lampCode = lampCode.substring(0,4)+"*";
				                		// 	}
				                			 
				                		// 	  return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					                    //       + lampCode + ' *瓦：'
					                    //       + '</div>'
					                    //       + schema[1].text + '：*'+'<br>'
					                    //       + schema[2].text + '：*' + '<br>'
										// 	  + schema[3].text + '：*' + '<br>';
											  
				                		//  }
				                   
				                        
				                         
				                  }
				              },
				              xAxis: {
				                  type: 'value',
				                  name: '功率(w)',
				                  nameGap: 16,
				                  nameTextStyle: {
				                      color: '#000',
				                      fontSize: 14
				                  },
            						scale:true,
				                  max: powerMax,
				                  splitLine: {
				                      show: false
				                  },
				                //   axisLine: {
				                //       lineStyle: {
				                //           color: '#000'
				                //       }
				                //   }
				              },
				              yAxis: {
				                  type: 'value',
				                  name: '平均亮度(cd/㎡)',
				                  //max :120,
				                  nameLocation: 'end',
				                  nameGap: 20,
				                  data: [40,50],
				                  nameTextStyle: {
				                      color: '#000',
				                      fontSize: 16
				                  },
            						scale:true,
				                //   axisLine: {
				                //       lineStyle: {
				                //           color: '#000'
				                //       }
				                //   },
				                  splitLine: {
				                      show: false
				                  }
				              },
				              visualMap: [
				                  {
				                      left: 'right',
				                      top: '10%',
				                      dimension: 3,
				                      min: evennessMin,
				                      max: evennessMax,
				                      itemWidth: 30,
				                      itemHeight: 120,
				                      calculable: true,
				                      precision:2,
				                      text: ['圆形大小：均匀度'],
				                      textGap: 30,
				                      textStyle: {
				                        //   color: '#fff'
				                      },
				                      inRange: {
				                          symbolSize: [10, 70]
				                      },
				                      outOfRange: {
				                          symbolSize: [10, 70],
				                          color: ['rgba(255,255,255,.2)']
				                      },
				                      controller: {
				                          inRange: {
				                              color: ['#c23531']
				                          },
				                          outOfRange: {
				                              color: ['#444']
				                          }
				                      }
				                  },
				                  {
				                      left: 'right',
				                      bottom: '15%',
				                      dimension:2,//指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组，
				                      min: lightnessMaxSmall,
				                      max: lightnessMaxBig,
				                      itemHeight: 120,
				                      calculable: true,
				                      precision: 0,
				                      text: ['明暗：最大亮度'],
				                      textGap: 30,
				                      textStyle: {
				                        //   color: '#fff'
				                      },
				                      inRange: {
				                          colorLightness: [0.9, 0.5]
				                      },
				                      outOfRange: {
				                          color: ['rgba(255,255,255,.2)']
				                      },
				                      controller: {
				                          inRange: {
				                              color: ['#c23531']
				                          },
				                          outOfRange: {
				                              color: ['#444']
				                          }
				                      }
				                  }
				              ],
				              series: [
								  {
				                      name: '其他',
				                      type: 'scatter',
				                      itemStyle: itemStyle,
				                      data: dataOther
				                  },
				                  {
				                      name: brandName,
				                      type: 'scatter',
				                      itemStyle: itemStyle,
				                      data: dataBJ
				                  }
				                  
				              ]
						  };
						  
				myChart.clear();
			// console.log(JSON.stringify(option))
			myChart.setOption(option);

          setTimeout(function (){
	        	    window.onresize = function () {
	        	    	myChart.resize();
	        	    }
	        },200)
			
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.cassBack_three{
	
	.el-button--primary{
		background-color: #5b65a1;
    	border-radius: 4px;
    	border: none;
		color: #fff;
	}
}
.cassBack_three .backuy{
	top: 7px
}
.xyAxis{
	// position: absolute;
	// top: 0;
	// right: 0;
	// background: rgb(246, 246, 253);
	// padding: 10px;
	// z-index: 66;
	.el-input__inner{
		height: 36px;
		line-height: 36px;
	}
	.el-form-item{
		margin-bottom: 5px;
	}
	.el-form-item__label{
		color: #333;
	}
	li:last-child{
		.el-form-item{
			margin-bottom:0;
		}
	}
}
</style>
<style>

    .top{
        margin-bottom: 20px;
        
    }
    .button{
            background-color: #5b65a1;
            border-radius: 4px;
            color: #fff;
            padding: 12px 20px;
            font-size: 14px;
            border: none;
            margin-right: 20px;
            cursor: pointer;
        }
    </style>